<template>
	<view class="homeLayout">
		<view class="addBox" @click="showAddModel">
			<image class="rotatable" :class="{ rotated: showAdd }" src="../../static/images/tabbar/plus.png" mode="heightFix"></image>
		</view>
		<z-paging ref="paging" v-model="dataList" @query="queryList"
		:default-page-size="4"
		@scroll="scrollPage"
		>
			<!-- slot='top' -->
			<view slot='top' class="statusBar" :style="{height: statusBarHeight + 'px'}"></view>
			<view slot='top' class="topBor" :style="{height: titleBarHeight + 'px'}">
				<view class="backIcon" @click="back">
					<u-icon name="arrow-left" 
					color="linear-gradient(to top right, #8B4500, #000000)" size="24"></u-icon>
				</view>
				<view class="topTitle">民生寄存金</view>
			</view>
			<view class="totalInfo">
				<view class="totalIcon">
					<!-- #f9a84d   #f57f20-->
					<!-- <view class="iconImg">
						<image src="../../static/images/zpImg/bookmark-one2.png" mode="heightFix"></image>
					</view> -->
					<view class="shuline"></view>
					<view class="iconText">概览</view>
				</view>
				
				<!-- <view class="line"></view> -->
				<view class="fundsIncomeBox">
					<view class="funds">
						
						<view class="fundText">
							<view class="title">资金</view>
						</view>
						<view class="line"></view>
						
						<view class="fundContent">
							<view class="rightContent">
								<view class="rateText">
									<view class="rateTop">50%</view>
									<view class="rateTextbott">剩余</view>
								</view>
							</view>
							<view class="leftContent">
								<view class="contentColm">
									<view class="tipleft">总额</view>
									<view class="tipRight">
										<view class="tipCenter">￥19999.00</view>
										<view class="tipdp">元</view>
									</view>
									
								</view>
								<view class="contentColm">
									<view class="tipleft">剩余</view>
									<view class="tipRight">
										<view class="tipCenter">￥999.00</view>
										<view class="tipdp">元</view>
									</view>
									
								</view>
								
								
							</view>
							
						</view>
						
					</view>
					<view class="income">
						<view class="incomeText">
							<view class="title">收益</view>
						</view>
						<view class="line"></view>
						<view class="incomeContent">
							<view class="inleftBox">
								<view class="inleftContent">
									<view class="incomeRateText">
										<view class="inrateTop">30%</view>
										<view class="inrateTextbott">盈率</view>
									</view>
								</view>
								<view class="bottomRate"></view>
							</view>
							
							<view class="inrightContent">
								<view class="contentColm">
									<view class="tipleft">盈利</view>
									<view class="tipRight">
										<view class="wintext">+99999999.00</view>
										<view class="tipdp">元</view>
									</view>
									
								</view>
								<view class="contentColm">
									<view class="tipleft">手续费</view>
									<view class="tipRight">
										<view class="tipCenter">￥999.00</view>
										<view class="tipdp">元</view>
									</view>
									
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
			<!-- <u-sticky> -->
			<view :slot='slotFlag' class="stickyBox" >
				<view class="detailTitle">
					<view class="leftD">
						<view class="shuline"></view>
						<view class="iconText">交易记录</view>
					</view>
					<view class="rightD">
						<view class="rightDImg">
							<image src="../../static/images/zbPage/filter.png" mode="heightFix"></image>
						</view>
						<view class="imgText">筛选</view>
						
					</view>
				</view>
				<view class="detailInfo">
					<view class="detop">
						<view class=""></view>
						<view class="detitle">持仓</view>
						<view class="btnOpent">跟随筛选
							<u-switch
								space="2" v-model="flowFlag" activeColor="#f9ae3d"
								inactiveColor="rgb(230, 230, 230)" size="12">
							</u-switch>
						</view>
					</view>
					<view class="line"></view>
					<view class="decontainer">					
						<view class="contentItem">
							<view class="itemText">金额(元)</view>
							<view class="itemNum">9999999</view>
						</view>
						<view class="contentItem">
							<view class="itemText">重量(克)</view>
							<view class="itemNum">99999</view>
						</view>
						<view class="contentItem">
							<view class="itemText">均价(元/克)</view>
							<view class="itemNum">99999</view>
						</view>
						
					</view>
					
				</view>
			</view>
				
			<!-- </u-sticky > -->
			<!-- <u-sticky offset-top="33">
				
			</u-sticky> -->
			<view class="detailBody">
				
				<view class="detailContent" >
					
					<trade-card v-for="(item,index) in dataList" :key="index" :costData="item"></trade-card>
					
					<!-- ------------------------------------- -->
					
				</view>
				
			</view>
		</z-paging>
		<u-popup :show="showAdd" :round="10" mode="top" @close="close" @open="open" :customStyle="popupCustomStyle" :safeAreaInsetTop="true">
			<view style="height: 60vh; position: relative;">
				<!-- <view :style="{height: statusBarHeight + 'px'}"></view>
				<view :style="{height: titleBarHeight + 'px'}">金账簿</view> -->
				<view class="addTitle" :style="{height: titleBarHeight + 'px'}">
					新增买入
				</view>
				<view class="tipText">
					<u-icon size="23" name="bookmark-fill" labelSize="14" :label="showText"></u-icon>
					<!-- <text>人生若只如初见，何事秋风悲画扇</text> -->
				</view>
				<!-- :labelStyle="{color: '#fff',fontWeight: 'bolder',
								background: 'linear-gradient(to top right, #8B4500, #000000)',
								'-webkit-background-clip': 'text',
								color: 'transparent', fontSize: '25rpx'}" -->
				<view class="formBox">
					<u--form :model="formData" ref="uForm" 				
					:labelStyle="{
								color: '#333333', fontSize: '25rpx',fontWeight: 'bolder'}"
					>
						<u-form-item label="买入金额(元)" prop="amount" labelWidth="100">
							<u--input type="digit"  :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入金额" v-model="formData.amount" />
							<view slot="right" class="addTipText">全部</view>
						</u-form-item>
						<u-form-item label="均价(元/克)" prop="averagePrice" labelWidth="100">
							<u--input type="digit"  :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入金额" v-model="formData.averagePrice" />							
						</u-form-item>
						<u-form-item label="买入重量(克)" prop="weight" labelWidth="100">
							<u--input type="digit"  :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入金额" v-model="formData.weight" />							
						</u-form-item>
						<u-form-item label="买入手续费(元)" prop="fee" labelWidth="100">
							<u--input type="digit"  :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入金额" v-model="formData.fee" />							
						</u-form-item>
						<u-form-item label="买入时间" prop="tradeTime" labelWidth="100">
							<uni-datetime-picker placeholder=" " type="datetime" v-model="formData.tradeTime" @change="changeTradeTime" />
						</u-form-item>
					</u--form>
					<u-button :customStyle="{width: '50%', marginTop: '70rpx' }" color="linear-gradient(to top right, #f6c74f, #f5a623)" type="warning" shape="circle" @click="submit">提交</u-button>
				</view>
				 <!-- bottom: '0rpx', position: 'fixd' -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	const tradeItemObj = uniCloud.importObject("tradeItemObj")
	// 使用页面滚动时引入此mixin，用于监听和处理onPullDownRefresh等页面生命周期方法(如果全局引入了，就不要这一步，全局引入示例见main.js)
	// import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import {getStatusBarHeight, getTitleBarHeight} from "@/utils/system.js"
	import tradeCard from '@/components/tradeCard/tradeCard.vue'
	export default {
		components: {
			tradeCard
		},
		// 注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		// mixins: [ZPMixin],
		data() {
			return {
				formData: {
					amount: '',
					averagePrice: '',
					weight: '',
					fee: '',
					tradeTime: ''
				},
				rules: {
					amount: [
						{
							required: true, 
							message: '请输入成本金额',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证：金额必须大于 0.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num <= 0) {
									return false;
								}
								return true;
							},
							message: '金额必须大于0.00元',
							trigger: ['change', 'blur']
						},
						{
						  // 自定义验证：金额不能超过9999999999.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num > 999999999.00) {
								  return false;
								}
								return true;
							},
							message: '金额最高不可超过999999999.00元',
							trigger: ['change', 'blur']
						},
						{
							// 正则验证：只允许数字和最多两位小数
							pattern: /^(\d+)(\.\d{1,2})?$/,
							transform(value) {
							return String(value);
							},
							message: '只能输入数字，且最多保留两位小数',
							trigger: ['change', 'blur']
						},
					],
					averagePrice: [
						{
							required: true, 
							message: '请输入均价金额',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证：金额必须大于 0.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num <= 0) {
									return false;
								}
								return true;
							},
							message: '金额必须大于0.00元',
							trigger: ['change', 'blur']
						},
						{
						  // 自定义验证：金额不能超过9999999999.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num > 999999999.00) {
								  return false;
								}
								return true;
							},
							message: '金额最高不可超过999999999.00元',
							trigger: ['change', 'blur']
						},
						{
							// 正则验证：只允许数字和最多两位小数
							pattern: /^(\d+)(\.\d{1,2})?$/,
							transform(value) {
							return String(value);
							},
							message: '只能输入数字，且最多保留两位小数',
							trigger: ['change', 'blur']
						},
					],
					weight: [
						{
							required: true, 
							message: '请输入重量',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证：重量必须大于 0
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num <= 0) {
									return false;
								}
								return true;
							},
							message: '重量必须大于0克',
							trigger: ['change', 'blur']
						},
						{
						  // 自定义验证：金额不能超过9999999999.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num > 999999999) {
								  return false;
								}
								return true;
							},
							message: '重量最高不可超过999999999克',
							trigger: ['change', 'blur']
						},
						{
							// 正则验证：只允许数字和最多两位小数
							pattern: /^(\d+)(\.\d{1,4})?$/,
							transform(value) {
							return String(value);
							},
							message: '只能输入数字，且最多保留4位小数',
							trigger: ['change', 'blur']
						},
					],
					fee: [
						{
							required: true, 
							message: '请输入手续费',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证：金额必须大于 0.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num <= 0) {
									return false;
								}
								return true;
							},
							message: '金额必须大于0.00元',
							trigger: ['change', 'blur']
						},
						{
						  // 自定义验证：金额不能超过9999999999.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num > 999999999.00) {
								  return false;
								}
								return true;
							},
							message: '金额最高不可超过999999999.00元',
							trigger: ['change', 'blur']
						},
						{
							// 正则验证：只允许数字和最多两位小数
							pattern: /^(\d+)(\.\d{1,2})?$/,
							transform(value) {
							return String(value);
							},
							message: '只能输入数字，且最多保留两位小数',
							trigger: ['change', 'blur']
						},
					],
					tradeTime: [
						{
						  // 自定义验证：不能为空
							validator: (rule, value, callback) => {
								// const num = Number(value);
								if (isNaN(value) || value === '') {
								  return false;
								}
								return true;
							},
							message: '请输入交易时间',
							trigger: ['change', 'blur']
						},
					]
				},
				completion: '50%',
				offset: '15rpx',
				flowFlag: true,
				slotFlag: '',
				showAdd: false,
				dataList: [],
				popupCustomStyle: {					
					background: 'linear-gradient(to bottom right, rgba(255, 222, 173, 0.99), rgba(255, 255, 255, 0.99))',
					// 'background-color': 'rgba(255,255,255)'
					// background: 'linear-gradient(to bottom right, #9, #fff)',
					
					
				},
				showText: '',
				textList: [
					'不猜涨跌,不赌涨跌,保持半仓,处变不惊',
					'兜里有钱,仓里有货,两边埋雷,见风使舵',
					'跌了就买,涨了就卖,眼见为实,随机应变',
					'低买高卖,灵活应对,顺势而为',
					'避险勿贪,落袋为安,见好就收,聚宝成盆',
					'不空仓,不重仓,不满仓,不割肉,不清仓'
				],
			};
		},
		onLoad(param) {
			console.log('param',param);
		},
		computed: {
			statusBarHeight() {
				return getStatusBarHeight()
			},
			titleBarHeight() {
				return getTitleBarHeight()
			},
			totalBarHeight() {
				return getStatusBarHeight() + getTitleBarHeight()
			},
			openid() {
				return this.$store.getters.getOpenId
			},

		},
		mounted() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			changeTradeTime(time) {
				let timestamp = Date.parse(time);
				this.formData.tradeTime = timestamp
				console.log(timestamp);
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					console.log(res, this.formData);
					this.addTradeItem()
				}).catch(errors => {
					uni.$u.toast('信息填写不正确')
				})
			},
			async addTradeItem() {
				this.formData.openid = this.openid
				// this.formData.costAmount = Number(this.formData.costAmount).toFixed(2)
				
				try{
					const res = await tradeItemObj.addTradeItem(this.formData)
					console.log('res', res);
					if(res && res.id !== null) {
						// const params = {
						// 		type: 'defult',
						// 		title: '成功主题(带图标)',
						// 		message: "新增成功",
						// 		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						// 		duration: '3000'
						// 	}
						// this.$refs.uToast.show({
						// 	...params,
						// 	complete() {
						// 		console.log("complete-showSuccess");
						// 	}
						// })
						
						this.$refs.uNotify.show({
							top: 100,
							type: 'warning',
							message: '新增成功'
						})
						this.show = false
						this.formData = {}
						this.$emit('updateData')
					}
				}catch(e){
					//TODO handle the exception
					if(e.errCode === 400) {
						this.$store.commit('SET_TABBAR_INDEX', {current: 1})
						uni.switchTab({
							url: '/pages/demo/demo'
						})
					}
				}
			},
			open() {
				console.log('open');
			},
			close() {
				this.showAdd = false
				// console.log('close');
			},
			back() {
				uni.navigateBack()
			},
			scrollPage(e) {
				if(e.detail.scrollTop > this.totalBarHeight + 30) {
					this.slotFlag = 'top'
				}else {
					this.slotFlag = ''
				}
				
			},
			
			showAddModel() {
				// this.showAdd = !this.showAdd				
				uni.$u.randomArray(this.textList)
				this.showText = this.textList[0]
				this.$nextTick(() => {
					this.showAdd = !this.showAdd
				})
			},
			async queryList(pageNo, pageSize) {
				this.$refs.paging.complete([1, 2, 1,1,1])
				// this.$nextTick(async () => {
				// 	console.log(this.isLogin);
				// 	const queryParam = {pageNo: pageNo, pageSize: pageSize, openid: this.openid}
				// 	try{
				// 		const res = await costObj.getList({pageNo,pageSize,openid: this.openid})
				// 		console.log('res=====', res);
				// 		this.$refs.paging.complete(res.data)
				// 	}catch(e){
				// 		//TODO handle the exception
				// 		this.$refs.paging.complete(false)
				// 		if(e.errCode === 400){
				// 			this.$store.commit('SET_TABBAR_INDEX', {current: 1})
				// 			uni.switchTab({
				// 				url: '/pages/demo/demo'
				// 			})
				// 		}
				// 	}
				// })
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.homeLayout {
		padding-left: 15rpx;
		padding-right: 15rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// background: linear-gradient(to top right, #fff, #FFFACD, #FFDEAD);
		
		background:
			linear-gradient(to bottom, transparent, #EFEFF4 600px),
			radial-gradient(90% 300px at left top, #FFDEAD, transparent),
			radial-gradient(60% 300px at right top, #f9c74f, transparent);
			
		.addBox {
			
			z-index: 99;
			position: fixed;
			bottom: 100rpx;
			right: 50rpx;
			background: linear-gradient(to top right, #f6c74f, #f5a623);
			border-radius: 50%;
			height: 100rpx;
			width: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translate(0%, -40%);
			transition: all 0.2s ease;
			// border: 10rpx solid #FFF;
			image {
				width: 80rpx;
				height: 80rpx;
			}
			
			.rotatable {
			  transition: transform 0.5s ease; /* 平滑过渡效果 */
			}
		}
			
		.topBor {
			position: relative;
			// border: 1rpx solid red;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.backIcon {
				position: absolute;
				left: 0;
				
			}
			
			.topTitle {
				// border: 1px solid rebeccapurple;
				text-align: center;
				font-size: 35rpx;
				font-weight: bolder;
				// border-radius: 50%;
				// background: linear-gradient(to top right, #8B4500, #000000);
				// -webkit-background-clip: text;
				// /* 文字裁剪 */
				// color: transparent;
				/* 设置文字颜色为透明 */
			}
		}
		
		.totalInfo{
			// border: 1rpx solid #f9c74f;
			// overflow: hidden;
			transition: 0.3s ease;
			// position: relative;
			margin-top: 10rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			height: 240rpx;
			// background: rgba(255, 255, 255, 0.8);
			// background: transparent;
			// background: linear-gradient(to top right, #FFFAF0, #fff);
			// border-radius: 30rpx;
			// border: 10rpx solid transparent;
			// box-shadow:
			// -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
			// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1),
			// inset -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
			// inset 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
			
			// box-shadow:
			// // -4rpx -4rpx 5rpx rgba(0, 0, 0, 0.1),
			//  -2rpx -2rpx 2rpx rgba(0, 0, 0, 0.1),
			// 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
			
			.totalIcon {
				max-width: 250rpx;
				// background: linear-gradient(to top right, #FFDEAD, #f6c74f); //
				border-bottom-right-radius: 30rpx;
				border-top-left-radius: 30rpx;
				// text-align: center;
				// max-width: 200rpx;
				// border: 1rpx solid red;
				// border-bottom: 1rpx solid #f9c74f;
				// border-right: 1rpx solid #f9c74f;
				// border-bottom-right-radius: 30rpx;
				// margin-top: 10rpx;
				// margin-left: 10rpx;
				display: flex;
				// align-items: center;
				// justify-content: center;
				// margin-top: -10rpx;
				// margin-left: -10rpx;
				height: 40rpx;
				.iconImg{
					height: 80%;
					image{
						width: 100%;
						height: 100%;
					}
				}
				
				
				
			}
			
				
			
			.fundsIncomeBox {
				margin-top: 20rpx;
				height: 170rpx;
				// height: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				// gap: 5rpx;
				// border: 1rpx solid red;
				
				
				
				.funds {
					// border: 1rpx solid green;
					overflow: hidden;
					border-radius: 20rpx;
					position: relative;
					background: #FFF;
					height: 100%;
					// display: flex;
					// justify-content: space-between;
					
					.fundText{
						margin-left: 40%;
						.title{
							// #B7BBC0
							// color: #9B9C9E;  #4D4D4D
							color: #333333;
							font-weight: bolder;
						}
					}
					
					// border: 1rpx solid rebeccapurple;
					.fundContent{
						margin-top: 20rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
						// height: 90%;
						position: relative;
						// border: 1rpx solid rebeccapurple;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.leftContent{
							z-index: 1;
							padding-left: 5rpx;
							// border: 1rpx solid rebeccapurple;
							width: 75%;
							
							
							// .contentColm {
							// 	margin-bottom: 10rpx;
							// 	display: flex;
							// 	align-items: center;
							// 	justify-content: space-between;
							// 	width: 100%;
								
							// 	.tipleft{
							// 		color: #9B9C9E;
							// 		font-size: 20rpx;
							// 	}
								
								
								
							// 	.tipRight{
							// 		display: flex;
							// 		align-items: center;
							// 		justify-content: center;
							// 		.tipCenter{
							// 			font-size: 25rpx;
							// 			font-weight: bolder;
							// 		}
									
							// 		.tipdp{
							// 			color: #9B9C9E;
							// 			font-size: 20rpx;
							// 		}
							// 	}
							// }
							
						}
						
						.rightContent{
							
							// top: 70rpx;
							height: 90rpx;
							width: 90rpx;
							position: relative;
							border-radius: 50%;
							// background: #FFF5EE;
							background: #F8F8FF;
							// background: transparent;
							overflow: hidden;
							// border: 4rpx double #FFF5EE;
							display: flex;
							align-items: center;
							justify-content: center;
							
							
							.rateText{
								z-index: 1;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								.rateTop{
									// border: 1rpx solid green;
									font-size: 28rpx;
								}
								.rateTextbott{
									// border: 1rpx solid red;
									color: #9B9C9E;
									font-size: 20rpx;
								}
							}
						}
					}
					
					
				}
				
				.income {
					margin-left: 10rpx;
					overflow: hidden;
					border-radius: 20rpx;
					position: relative;
					background: #FFF;
					height: 100%;
					// z-index: 1;
					// border: 1rpx solid green;
					
					.incomeText{
						margin-left: 40%;
						margin-right: 10rpx;
						position: relative;
						.title{
							color: #333333;
							font-weight: bolder;
						}
					}
					
					.incomeContent{
						
						margin-top: 20rpx;
						// margin-left: 10rpx;
						margin-right: 10rpx;
						position: relative;
						// border: 1rpx solid rebeccapurple;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.inleftBox {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							
							.inleftContent{
								animation: move 1000ms infinite alternate;
								// padding-top: 5rpx;
								width: 80rpx;
								height: 80rpx;
								// line-height: 80rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
								// border: 1rpx solid red;
								background: 
								// radial-gradient(circle at 50% 50%, white 50rpx, transparent 50rpx);
								radial-gradient(circle at 50% 50%, white 30rpx, transparent 30rpx),
								conic-gradient(#AFAFD8 0% 10%, #F0F0FF 10% 100%);
								
								// conic-gradient(#fb9e67 0% 10%, #ffe0c1 10% 100%);
								
								// conic-gradient(from 180deg, #e2a6b0 0% 10%, #f8f0ef 10% 100%);
								// conic-gradient(	#f7c948 0% 100%); #FCF4E6
								// conic-gradient(gold 0% 30%, transparent 30% 100%);
								// font-size: 20rpx;
								.incomeRateText{
									// border: 1rpx solid green;
									// z-index: 1;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									.inrateTop{
										// border: 1rpx solid green;
										font-size: 26rpx;
									}
									.inrateTextbott{
										// border: 1rpx solid red;
										color: #9B9C9E;
										font-size: 20rpx;
									}
								}
							}
							
							.bottomRate {
									height: 15rpx;
									width: 70rpx;
									margin-top: 5rpx;
									border-radius: 100%;
									background: #000000;
									opacity: .05;
									animation: shadowMove 1000ms infinite alternate;
								}
							
						}
						
						
						.inrightContent{
							z-index: 1;
							padding-left: 5rpx;
							// border: 1rpx solid rebeccapurple;
							width: 75%;
						}
					}
				}
			}
			
		}
		
		.stickyBox {
			// border: 1rpx solid red;
			padding-bottom: 10rpx;
			border-radius: 20rpx;
			// background: linear-gradient(to top, #FFF5E9, #FFF 40%);
			margin-left: 15rpx;
			margin-right: 15rpx;
			.detailTitle{
				// height: 50rpx;
				// background: linear-gradient(to right, #FDE9CC, #EFEFF4 40%, #F9E0A2);
				// background-color: rgba(255, 255, 255, 0.01); /* 半透明背景 */
				// backdrop-filter: blur(10rpx); /* 背景模糊 */	
				// margin-left: 15rpx;
				// margin-right: 15rpx;
				padding-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				// height: 80rpx;
				// border: 1rpx solid red;
				// opacity: 1 !important;
				// background: #EFEFF4;
				
				.leftD{
					display: flex;
					// border: 1rpx solid red;
				}
				.rightD{
					margin-right: 20rpx;
					padding: 5rpx;
					// width: 100rpx;
					// border: 1rpx solid red;
					height: 28rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.rightDImg{
						// margin-right: 5rpx;
						display: flex;
						align-items: center;
						height: 93%;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
					.imgText{
						text-align: center;
						color: #9B9C9E;
						font-size: 24rpx;
						// font-weight: bold;
					}
				}
			}
			.detailInfo{
				// border: 1rpx solid red;
				background: #FFF;
				// background: linear-gradient(to top, #FFF5E9, #FFF 80%);
				height: 135rpx;
				border-radius: 20rpx;
				
				.detop {
					 
					// border: 1rpx solid red;
					// position: relative;
					// margin-bottom: 10rpx;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					
					.detitle{
						text-align: center;
						color: #333333;
						font-weight: bolder;
					}
					
					.btnOpent{
						// border: 1rpx solid red;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-right: 15rpx;
						font-size: 20rpx;
						color: #9B9C9E;
					}
				}
				
				.decontainer{
					margin-top: 15rpx;
					display: grid;
					grid-template-columns: repeat(3, 1fr);	
					
					.contentItem{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						
						.itemText {
							font-size: 23rpx;
							color: #9B9C9E;
						}
						
						.itemNum {						
							text-align: center;
							font-size: 30rpx;
							font-weight: bolder;
						}
					}
				}
			}
		}
		
		
		.detailBody{
			// margin-top: 20rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			// border: 1rpx solid red;
			
			.detailContent{
				
			}
		}
	
	}
	
	.rotated {
	  transform: rotate(225deg); /* 顺时针旋转220度 */
	}
	
	
	
	.funds::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background: linear-gradient(#EBF5FE,#fFF);
		background: linear-gradient(#F0F0FF, #F8F8FF);
		// background: linear-gradient(#E6E6FA, #F8F8FF);
		clip-path: circle(25% at 100% 0%);
	}
	
	// .funds::after {
	// 	position: absolute;
	// 	content: "";
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	background: linear-gradient(#F5F5FD, #F8F8FF);
	// 	// #E6E6FA
	// 	clip-path: circle(25% at 100% 0%);
	// }
	
	// .funds::after {
	//     content: "";                  /* 必须包含，即使它是空的 */
	//     position: absolute;           /* 绝对定位，相对于 .target-element */
	//     top: 0;
	//     left: 0;
	//     width: 100%;                  /* 占据整个父元素的宽度 */
	//     height: 100%;                 /* 占据整个父元素的高度 */
	//     background-image: url('/static/images/zbPage/financing-one5.png'); /* #f5f4f4 设置背景图片路径 */
	//     background-size: 40% 80%;       /* 根据需要调整背景图片大小 */
	//     background-position: center;  /* 可选：将背景图片居中 */
	//     background-repeat: no-repeat; /* 防止背景图片重复 */
	// 	// transform: skew(20deg, 0deg);
	// 	// transform: skewX(-20deg);
	//     z-index: 0;                  /* 确保伪元素在原始内容之下 */
	// }
	
	.income::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background: linear-gradient(#FFF5EE,#FAF0E6);
		// background: linear-gradient(#faf5f4,#f8f0ef);
		
		
		// background: linear-gradient(#fff0e0,#fFF);
		background: linear-gradient(#F0F0FF, #F8F8FF);
		// background: linear-gradient(#E2F0FD,#fFF);
		// #FCF4E6
		clip-path: circle(25% at 100% 0%);
		// z-index: 0;
	}
	
	// .income::after {
	//     content: "";                  /* 必须包含，即使它是空的 */
	//     position: absolute;           /* 绝对定位，相对于 .target-element */
	//     top: 0;
	//     left: 0;
	//     width: 100%;                  /* 占据整个父元素的宽度 */
	//     height: 100%;                 /* 占据整个父元素的高度 */
	//     background-image: url('/static/images/zbPage/income-one2.png'); /* #f5f4f4 设置背景图片路径 */
	//     background-size: 40% 80%;       /* 根据需要调整背景图片大小 */
	//     background-position: center;  /* 可选：将背景图片居中 */
	//     background-repeat: no-repeat; /* 防止背景图片重复 */
	// 	// transform: skew(20deg, 0deg);
	// 	// transform: skewX(-20deg);
	//     z-index: 0;                  /* 确保伪元素在原始内容之下 */
	// }
	
	// .income::after {
	// 	position: absolute;
	// 	content: "";
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	background: linear-gradient(#FFF5EE,#FAF0E6);
	// 	clip-path: circle(30% at 40% 100%);
	// 	// z-index: 0;
	// }
	
	
	.rightContent::before {
		display: inline-block;
		width: 180rpx;
		height: 180rpx;
		content: "";
		// #4c6ef5  #B8B8DB
		// #f8f0ef  #ff6666
		background-color: #AFAFD8;
		// background-color: #A0BEEf;
		border-radius: 70rpx;
		position: absolute;
		left: 50%;
		top: calc(100% - 50%);
		transform: translate(-50%, 0);
		animation: spin 8s linear infinite;
		z-index: 0;
	}
	
	@keyframes spin {
		from { transform: translate(-50%, 0) rotate(0deg); }
		to { transform: translate(-50%, 0) rotate(360deg); }
	}
	
	/* 点击时阴影逐渐消失 */
	.totalInfo:active {
		transform: scale(0.97);
		box-shadow: 0 0 0 0 transparent;
	}
	
	.shuline {
		// height: 100%;
		border-radius: 10rpx;
		width: 10rpx;
		background: #FFC96F;
	
	}
	
	.line {
		// margin-top: 20rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		// width: 90%;
		height: 1rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		z-index: 1;
	}
	
	.iconText {
		
		line-height: 40rpx;
		margin-left: 10rpx;
		// text-align: center;
		font-size: 35rpx;
		font-weight: bolder;
		// border-radius: 50%;
		background: linear-gradient(to top right, #8B4500, #000000);
		-webkit-background-clip: text;
		/* 文字裁剪 */
		color: transparent;
	}
	
	.contentColm {
		margin-bottom: 10rpx;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		width: 100%;
		
		.tipleft{
			color: #9B9C9E;
			font-size: 20rpx;
		}
		
		
		
		.tipRight{
			display: flex;
			align-items: center;
			justify-content: center;
			.tipCenter{
				font-size: 28rpx;
				font-weight: bolder;
			}
			
			.tipdp{
				color: #9B9C9E;
				font-size: 18rpx;
			}
		}
	}
	
	.wintext{
		background: linear-gradient(to top right, #FF3030, #EE2C2C);
		-webkit-background-clip: text;
		color: transparent;
		font-size: 28rpx;
		font-weight: bolder;
	}
	
	.topText {
		font-size: 23rpx;
		color: #9B9C9E;
	}
	
	.numText {
		font-weight: bold;
	}
	
	
	.jtRoted {
	  transform: rotate(180deg); /* 顺时针旋转180度 */
	}
	
	@keyframes move {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(-10rpx);
		}
	}
	@keyframes shadowMove {
		from { 
			opacity: .1;
			transform: scale(0.75)
		}
		to {
			opacity: .05;
			transform: scale(1)
		}
	}
	
	
	.addTitle{
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		font-weight: bolder;
		font-size: 50rpx;
		background: linear-gradient(to top right, #8B4500, #000000);
		-webkit-background-clip: text;
		color: transparent;
	}
	.addTitle:before {
	    content: '';
	    position: absolute;
	    bottom: -10rpx;
	    left: 20rpx;
	    transform: translateX(0%);
	    width: 100rpx;
	    height: 3px;
	    background: #f5a623;
	    border-radius: 3px;
	}
	
	.tipText {
		display: flex;
		justify-content: left;
		align-items: center;
		margin-top: 15rpx;
		padding-left: 20rpx;
	}
	
	.formBox {
		height: 100%;
		padding-top: 50rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}
	
	.addTipText {
		// font-size: 23rpx;
		font-size: 23rpx;
		color: #9B9C9E;
	}
	
	// .addTipText::before {
	// 	content: '剩余本金';
	// 	font-size: 20rpx;
	// 	color: #9B9C9E;
	// }
</style>
